<template>
    <view :style="{ '--color': color }">
        <status-bar title="粉丝明细"></status-bar>
        <view class="tabs" :style="{ top: `${totalHeight}px` }">
            <u-tabs :list="list1" :scrollable="false" :lineColor="color" :current="current" :activeStyle="{ color: color }" @click="tabClick"></u-tabs>
        </view>
        <view class="rows m-top110">
            <view class="list" v-for="(item, index) in pageData" :key="index">
                <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="userImg"></image>
                <view class="listBox">
                    <view class="row a-center">
                        <text class="flex-1 listTxt ellipsis">{{ item.v_name }} /{{ item.v_tel }}</text>
                        <view class="vip" v-if="item.vip_level">{{ item.vip_level }}</view>
                    </view>
                    <text class="listTxt">注册时间：{{ item.v_addtime }}</text>
                    <view class="row j-sb a-center" v-if="!item.special">
                        <text class="listTxt">自购订单：{{ item.orders_num }}</text>
                        <text class="listTxt">订单金额：￥{{ item.total_money }}</text>
                    </view>
                    <view class="rows m-top10" v-else>
                        <view class="row j-sb" v-for="(ditem, dindex) in item.special" :key="dindex">
                            <text class="listTxt" @click.stop="clicBtn(subItem)" v-for="(subItem, subIndex) in ditem">{{ subItem.title }}：{{ subItem.val }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <emptys title="暂无当前内容" v-if="!pageData[current]"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                list1: [
                    {
                        name: '一级',
                        badge: {
                            value: 0
                        }
                    },
                    {
                        name: '二级',
                        badge: {
                            value: 0
                        }
                    },
                    {
                        name: '三级',
                        badge: {
                            value: 0
                        }
                    }
                ],
                current: 0,
                pageData: [],
                down_v_id: '',
                page: 1,
                pagecount: 10,
                showLevel: 1, //等级
                getMore: true
            };
        },
        onLoad(opt) {
            if (opt.down_v_id) this.down_v_id = opt.down_v_id;
            this.distribution_people(this.showLevel);
        },
        methods: {
            distribution_people(showLevel) {
                this.$http
                    .get({
                        url: '/zzj_singleSaleApi/distribution_people_new',
                        data: {
                            down_v_id: this.down_v_id,
                            page: this.page,
                            pagecount: this.pagecount,
                            showLevel
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data;
                        let level_name = res.level_name || [];
                        this.list1 = level_name;
                        level_name.forEach((item) => {
                            item.badge = {
                                value: item.num
                            };
                            if (item.showLevel == showLevel) {
                                const resultData = result[showLevel - 1] || [];
                                this.page == 1 ? (this.pageData = resultData) : (this.pageData = [...this.pageData, ...resultData]);
                            }
                        });

                        const resultData = result[showLevel - 1] || [];
                        if (resultData.length < this.pagecount) this.getMore = false;
                    });
            },
            tabClick(e) {
                const current = e.index;
                this.current = current;
                this.showLevel = this.list1[current].showLevel;
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.distribution_people(this.showLevel);
            },
            clicBtn(item) {
                if (!item.path) return;
                this.toUrl(item.path);
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.distribution_people(this.showLevel);
        },
        computed: {
            ...mapState(['color', 'totalHeight'])
        }
    };
</script>

<style>
    page {
        background-color: #f8f8f8;
    }
</style>
<style lang="scss" scoped>
    .tabs {
        width: 100%;
        height: 84rpx;

        position: fixed;
        left: 0;
        z-index: 888;
        background-color: #ffffff;
    }

    .list {
        width: 710rpx;
        margin: 0 auto;
        padding: 24rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        margin-top: 24rpx;
        border-radius: 10rpx;
        box-shadow: rgba(241, 241, 241, 0.1) 0px 6rpx 20rpx;
    }

    .userImg {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        margin-right: 24rpx;
    }

    .listBox {
        flex: 1;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .listTxt {
        font-size: 26rpx;
        color: #333;
    }

    .vip {
        padding: 2rpx 14rpx;
        background-color: var(--color);
        border-radius: 6rpx;
        color: #fff;
        font-size: 22rpx;
    }
</style>